<!-- 分享海报 -->
<template>
    <view :style="{'--total-height': totalHeight + 'px', '--color': color}">
        <status-bar title='分享海报' :goHome='fromShare'></status-bar>
        <view class="d-flex">
            <!-- 左侧菜单 -->
            <view class="left d-flex f-column">
                <view class="item bgf3 size26 color_66 t-letter2 p-left20 ellipsis" v-for="(item,index) in cateList" :key="index" @click="changeNav(item, index)"
                    :class="{'active': leftIndex == index, 'prev': leftIndex - 1 == index, 'next': leftIndex + 1 == index}">
                    {{ item.website_list_title }}
                </view>
                <view class="item flex-1 bgf3" :class="{'next': leftIndex == cateList.length - 1}"></view>
            </view>
            <!-- 右侧海报 -->
            <view class="right flex-1 padding10 d-flex j-sb f-wrap a-content-start" v-if="list.length">
                <view class="item m-bot10 bor_radius_6 p-re" v-for="(item,index) in list" :key="index" 
                    @click="toUrl(`/privatePage/material/selectPoster?cate_id=${cateList[leftIndex].website_list_id}&current=${index}`)">
                    <image :src="$imgUrls(item.poster)" mode="aspectFill"></image>
                    <view class="down p-ab d-flex">
                        <u-icon name="download" color="#fff"></u-icon>
                        <text class="size22 white m-left6">{{ item.website_article_download }}</text>
                    </view>
                </view>
            </view>
            <empty cat='3' msg='该分类下暂无海报' class="flex-1" v-else></empty>
        </view>
        <view class="btns d-flex">
            <view class="first flex-1 flexac bgwhite" @click="$rectTo('/privatePage/material/center')">
                <text class="iconfont icon-duosucai size36"></text>
                <text class="size28 m-left20">素材库</text>
            </view>
            <view class="last flex-1 flexac">
                <text class="iconfont icon-tupian size36 white"></text>
                <text class="size28 white m-left20">分享海报</text>
            </view>
        </view>
    </view>
</template>

<script>
import { mapState } from 'vuex'
export default {
    data(){
        return {
            fromShare: 0,
            leftIndex: 0,
            cateList: [],
            list: [],
            isFirst: true // 确保onShow首次加载页面不执行
        }
    },
    computed:{
		...mapState(['totalHeight','color'])
	},
    onLoad(){
        this.getCate()
    },
    onShow(){
        if(this.isFirst) return
        this.getList(this.cateList[this.leftIndex].website_list_id)
    },
    methods: {
        getCate(){
            this.$http.get({
                url: '/PrivateSphereApi/getResource',
                data: {
                    type: 'poster'
                }
            }).then(res=>{
                if(res.code != 200) return this.$Toast(res.msg)
                if(res.data && res.data.length){
                    this.cateList = res.data
                    this.getList(this.cateList[0].website_list_id)
                    this.isFirst = false
                }
            })
        },
        getList(website_list_id){
            this.$http.get({
                url: '/PrivateSphereApi/getResource',
                data: {
                    type: 'poster',
                    website_list_id
                }
            }).then(res=>{
                if(res.code != 200) return this.$Toast(res.msg)
                this.list = res.data || []
            })
        },
        changeNav({website_list_id}, index){
            this.leftIndex = index
            this.getList(website_list_id)
        }
    }
}
</script>

<style lang="scss" scoped>
.left {
    width: 150rpx;
    height: calc(100vh - var(--total-height) - 45px);
    overflow-y: auto;
    .item {
        line-height: 80rpx;
        &.active {
            background: #fff;
            color: var(--color);
            font-weight: bold;
        }
        &.prev {
            border-bottom-right-radius: 10rpx;
        }
        &.next {
            border-top-right-radius: 10rpx;
        }
    }
}
.right {
    height: calc(100vh - var(--total-height) - 45px);
    overflow-y: auto;
    .item {
        width: 285rpx;
        height: 355rpx;
        .down {
            right: 10rpx;
            bottom: 10rpx;
            line-height: 36rpx;
            background: #111;
            opacity: 0.5;
            border-radius: 18rpx;
            padding: 0 16rpx;
        }
    }
}
.btns {
    position: fixed;
    left: 0;
    bottom: constant(safe-area-inset-bottom);
    bottom: env(safe-area-inset-bottom);
    width: 100%;
    height: 90rpx;
    z-index: 20;
    .first {
        border: 1px solid #65A3FF; 
        border-radius: 16rpx 0rpx 0rpx 0rpx; 
        color: #65A3FF;   
    }
    .last {   
        background: #65A3FF;
        border-radius: 0rpx 16rpx 0rpx 0rpx; 
    }
}
</style>